<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Z+ NATLink</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/page.css"/>
    <style>
        #member-app .notAdmin::after {
            border: 0 !important;

        }

        .butBar {
            background-color: #2b77c2;
        !important;
            color: white;
            margin-left: 10px;
        }

        .concurrency {
            width: 150px;
            margin-left: 10px;
        }

    </style>
</head>
<body>
<div class="dashboard-container" id="app">
    <div class="container">
        <div class="tableBar">
            <el-button
                    type="primary"
                    class="butBar"
                    @click="addMemberHandle()">
                + 添加代理
            </el-button>
            <el-button
                    type="test"
                    class="butBar"
                    @click="dialogVisible = true">
                显示客户端秘钥
            </el-button>
            <el-input class="concurrency" v-model="concurrency" placeholder="客户端允许并发数"></el-input>
            <el-button
                    type="primary"
                    class="butBar"
                    @click="saveConcurrency()">
                保存
            </el-button>
        </div>
        <el-table
                :data="configList"
                stripe
                class="tableBox">
            <el-table-column
                    prop="configId"
                    label="配置标识">
            </el-table-column>
            <el-table-column label="协议类型">
                <template slot-scope="scope">
                    {{scope.row.proxyType}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="domain"
                    label="域名"
            ></el-table-column>
            <el-table-column
                    prop="configIp"
                    label="代理IP"
            ></el-table-column>
            <el-table-column
                    prop="configPort"
                    label="代理端口">
            </el-table-column>
            <el-table-column label="代理状态">
                <template slot-scope="scope">
                    {{ String(scope.row.status) === 'OPEN' ? '开启' : '关闭' }}
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="160"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-button
                            type="text"
                            size="small"
                            class="blueBug"
                            @click="">
                        编辑
                    </el-button>
                    <el-button
                            type="text"
                            size="small"
                            class="delBut non"
                            @click="statusHandle(scope.row)">
                        {{ scope.row.status == 'OPEN' ? '启用' : '禁用' }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog
            title="客户端秘钥信息"
            :visible.sync="dialogVisible"
            width="30%">
        <span></span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
    </el-dialog>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                clientId:"",
                configList: [],
                concurrency: "",
                dialogVisible: false
            }
        },
        computed: {},
        created() {
            this.clientId = window.localStorage.getItem("clientId");
            this.getConfigList();
        },
        methods: {
            getConfigList() {
                axios.get("/api/getConfigList/" + this.clientId).then((res) => {
                    if (res.data.code === 200) {
                        this.configList = res.data.data;
                    } else {
                        alert("获取配置失败，请重新尝试")
                    }
                })
            },
            // 添加
            addMemberHandle() {
                window.parent.menuHandle({
                    id: '2',
                    url: 'page/add.html',
                    name: '添加代理'
                }, true)

            },
            statusHandle(row) {
                var configId = row.configId;
                axios.post("/api/open/" + configId).then((res) => {
                    if (res.data.code === 200) {
                        this.getConfigList(this.clientId);
                    } else {
                        alert("操作失败，请重新尝试")
                    }
                })
            },
            saveConcurrency() {

            }

        }
    })
</script>
</body>
</html>